.backgroundImage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 215vh;
    /* 全屏高度 */
    /* 以左侧为起点显示图片的右部分 */
    background-repeat: no-repeat;
    background-size: cover;
    /* 调整此值以控制显示图片的具体部分 */
}

.character {
    width: 11vw;
    height: auto;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.character.fainted {
    transform: rotate(90deg) scale(0.8);
}

.chatbox {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.dog {
    position: absolute;
    z-index: 10;
    transform: scaleX(-1);
    animation: dogEntry forwards;
}

.dog.running {
    animation: dogEntry 6s linear forwards,
        dogRunningAnimation 0.2s steps(2) 30;
    animation-delay: 0.5s;
}

@keyframes dogEntry {
    0% {}

    100% {
        left: var(--dog-stop-x);
        top: var(--dog-stop-y);
    }
}

@keyframes dogRunningAnimation {
    from {
        content: url('@/assets/p1/dog_standing.png');
    }

    to {
        content: url('@/assets/p1/dog_running.png');
    }
}

@keyframes dogRunningAnimation2 {
    from {
        content: url('@/assets/p1/dog_standing.png');
    }

    to {
        content: url('@/assets/p1/dog_running.png');
    }
}

.dog.goingHome {
    animation: dogGoHome 8s linear forwards, dogRunningAnimation2 0.2s steps(2) 40;
    transform: scaleX(1);
    transition: transform 0.3s ease;
}

@keyframes dogGoHome {
    0% {
        left: var(--dog-stop-x);
        top: var(--dog-stop-y);
    }

    50% {
        left: calc(var(--dog-stop-x) - 0.25 * var(--screen-width));
        top: var(--dog-stop-y);
    }

    100% {
        left: calc(0.6 * var(--screen-width));
        top: calc(0.68 * var(--screen-height));
    }

}

.chat-bubble {
    box-sizing: border-box;
    position: absolute;
    top: 160vh;
    /* 调整以适合具体需求 */
    left: 50%;
    /* 调整以适合具体需求 */
    width: 120px;
    /* 调整以适合具体需求 */
    height: 100px;
    padding: 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 30px;
    line-height: 80px;
}

.chat-bubble:after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* 调整以适合具体需求 */
    top: -2vh;
    left: 80%;
    /* 调整以适合对齐 */
    border-width: 20px;
    transform: rotate(-30deg);
    /* 旋转箭头指向左下 */
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.fieldGame {
    background-color: #f0ded0;
    border-color: #c07f4b;
    border-width: 6px;
    border-style: solid;
    border-radius: 5px;
    width: 600px;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    font-size: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 80px;
    z-index: 800;
}

.fieldGam div {
    height: 80px;

}

.fieldGame input {
    width: 80px;
    height: 40px;
    font-size: 40px;
    background-color: #f0ded0;
    border-color: #c07f4b;
    border-width: 3px;
    border-style: solid;
}

.gouguGame {
    background-color: #f0ded0;
    border-color: #c07f4b;
    border-width: 6px;
    border-style: solid;
    border-radius: 5px;
    width: 600px;
    height: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    font-size: 50px;
    line-height: 80px;
    z-index: 800;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gouGu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -5vw;

}

.gouGu div {
    border-radius: 10px;
    background-color: #ccc;
    margin-left: 5vw;
    line-height: 80px;
}

.ground {
    width: 50px;
    height: 40px;
    position: absolute;
    background: white;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}